<template>
  <div class="content">
    <div class="row">数字部分是： {{ props.simpleProp }}</div>
    <div class="row">姓名是： {{ props.refrenceProp.name }}</div>
    <div class="row">年龄是：<input v-model="person.age" @input="handleInput" /></div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'

const emits = defineEmits(['change'])

const props = defineProps({
  simpleProp: {
    type: Number,
    default: 1
  },
  refrenceProp: {
    type: Object,
    // 这里能写成 default: {} 吗？
    //
    // default: {}, // 第一种错误 子组件引用地址相同，导致数据流混乱，修改了子组件的一个引用副本，会导致其他子组件的引用同时被修改

    // default: () => {}    // 第二种错误，没有任何返回值， 也是相当于 undefined

    // default: () => {
    //   return  {}
    // }

    default: () => ({}) // 返回 {}
  }
})

const person = ref({})

const handleInput = () => {
  emits('change', person.value)
}

watch(
  () => props.refrenceProp,
  (newVal) => {
    console.log('newVal--->', newVal)
    person.value = newVal
  },
  { immediate: true }
)
</script>
